<template>
	<view class="tree-input" style="z-index: 9999;position: fixed;">
		<uni-drawer
      ref="uniDrawer"
      mode="right"
      :mask-click="true"
      width="270"
			z-index="9999"
      @change="changeStatus"
    >
			<tree-select
        :value="value"
        :treeData="treeData"
        :props="props"
        :drawerStatus="drawer"
        :ruleFormData="ruleFormData"
        @confirm="handleClick"
      ></tree-select>
		</uni-drawer>
	</view>
</template>

<script>
  import TreeSelect from './treeSelect'
	export default {
		name: "treeSelectDrawer",
    components: { TreeSelect },
    data() {
      return {
        drawer: 'close',
        selectData: []
      }
    },
		props: {
			treeData: {
				type: Array,
				default: () => []
			},
			// 回显值
			value: {
				type: Array,
				default: () => []
			},
			props: {
				type: Object,
				default: () => ({
					label: "name",
					value: "id",
					children: "children"
				})
			},
      ruleFormData: {
        type: String
      }
		},
		methods: {
			open() {
				this.$refs.uniDrawer.open()
			},
			close() {
				this.$refs.uniDrawer.close()
			},
      changeStatus(status) {
        if (status) {
          this.drawer = 'open'
        } else {
          this.drawer = 'close'
        }
      },
			handleClick(result) {
				this.close()
				this.$emit("confirm", result)
			}
		}
	}
</script>

